<template>
  <div>
    <el-row :gutter="10" style="margin-bottom: 30px;">
      <el-col :span="6">
        <el-card style="color: #409EFF;">
          <div><i class="el-icon-user-solid"></i>用户总数</div>
          <div style="text-align: center;font-weight: bold;font-size:larger;">{{allUserCount}}</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card style="color: #67C23A;">
          <div>订单总数</div>
          <div style="text-align: center;font-weight: bold;font-size:larger;">{{allOrderCount}}</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card style="color: #E6A23C;">
          <div>收益总数</div>
          <div style="text-align: center;font-weight: bold;font-size:larger;">{{allPayMoney}}</div>
        </el-card>
      </el-col>
      <el-col :span="6">
        <el-card style="color: #909399;">
          <div>成本总数</div>
          <div style="text-align: center;font-weight: bold;font-size:larger;">{{allCostMoney}}</div>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="8">
        <div id="main" style="width: 500px;height: 400px;"></div>
      </el-col>
      <el-col :span="8">
        <div id="pie" style="width: 500px;height: 400px;"></div>
      </el-col>
      <el-col :span="8">
        <div id="fundmentalLine" style="width: 500px;height: 400px;"></div>
      </el-col>
      <el-col :span="24">
        <div id="line" style="width: 100%;height:400px;"></div>
      </el-col>
    </el-row>

  </div>
</template>

<script>
  import * as echarts from 'echarts';
  export default {
    name: 'Echarts',
    data() {
      return {
        myChart1: '',
        myChart2: '',
        myChart3: '',
        myChart4: '',
        echartOption1: {
          title: {
            text: '每月收入',
            subtext: '对比',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [{
            name: 'Access From',
            type: 'pie',
            radius: '70%',
            data: [
              // {
              //   value: 93,
              //   name: '高数'
              // },
              // {
              //   value: 92,
              //   name: '数据结构'
              // },
              // {
              //   value: 88,
              //   name: 'JAVA设计'
              // },
              // {
              //   value: 83,
              //   name: '英语'
              // },
              // {
              //   value: 70,
              //   name: '其他'
              // }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            },
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: 'inner',
                  //模板变量有 {a}、{b}、{c}、{d}，分别表示系列名，数据名，数据值，百分比。
                  formatter: '{b}\n{c}元\n{d}%'
                }
              }
            },
          }]
        },
        echartOption2: {
          title: {
            text: '各季度用户注册数量统计',
            subtext: '趋势图',
            left: 'center'
          },
          xAxis: {
            type: 'category',
            data: ['第一季度', '第二季度', '第三季度', '第四季度'],
          },
          yAxis: {
            type: 'value'
          },
          series: [{
              data: [1],
              type: 'line'
            },
            {
              data: [1],
              type: 'bar'
            }
          ]
        },
        echartOption3: {
          title: {
            text: '获益趋势图'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            // data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
            data: ["收入", "成本"]
          },
          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            data: []
          },
          yAxis: {
            type: 'value'
          },
          series: [{
              name: '收入',
              type: 'line',
              stack: 'Total',
              // data: [120, 132, 101, 134, 90, 230, 210]
              data: []
            },
            {
              name: '成本',
              type: 'line',
              stack: 'Total',
              // data: [220, 182, 191, 234, 290, 330, 310]
              data: []
            },
          ]
        },
        echartOption4: {
          title: {
            text: '收入流水',
            subtext: '趋势',
            left: 'center'
          },
          xAxis: {
            type: 'category',
            boundaryGap: false,
            // data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            data: []
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            // data: [820, 932, 901, 934, 1290, 1330, 1320],
            data: [],
            type: 'line',
            areaStyle: {}
          }]
        },
        allUserCount: 0,
        allOrderCount: 0,
        allPayMoney: 0,
        allCostMoney: 0,
      }
    },
    //数据自动刷新，必然需要一个监听机制告诉Echarts重新设置数据
    watch: {
      //观察option的变化
      echartOption2: {
        handler(newVal, oldVal) {
          if (this.myChart2) {
            if (newVal) {
              this.myChart2.setOption(newVal);
            } else {
              this.myChart2.setOption(oldVal);
            }
          } else {
            this.mounted();
          }
        },
        deep: true //对象内部属性的监听，关键。
      },
      echartOption1: {
        handler(newVal, oldVal) {
          if (this.myChart1) {
            if (newVal) {
              this.myChart1.setOption(newVal);
            } else {
              this.myChart1.setOption(oldVal);
            }
          } else {
            this.mounted();
          }
        },
        deep: true //对象内部属性的监听，关键。
      },
      echartOption3: {
        handler(newVal, oldVal) {
          if (this.myChart3) {
            if (newVal) {
              this.myChart3.setOption(newVal);
            } else {
              this.myChart3.setOption(oldVal);
            }
          } else {
            this.mounted();
          }
        },
        deep: true //对象内部属性的监听，关键。
      },
      echartOption4: {
        handler(newVal, oldVal) {
          if (this.myChart4) {
            if (newVal) {
              this.myChart4.setOption(newVal);
            } else {
              this.myChart4.setOption(oldVal);
            }
          } else {
            this.mounted();
          }
        },
        deep: true //对象内部属性的监听，关键。
      }
    },

    // 页面元素渲染完全之后再触发
    mounted() {
      var chartDom = document.getElementById('main');
      this.myChart1 = echarts.init(chartDom);
      this.echartOption1 && this.myChart1.setOption(this.echartOption1);


      // 柱图
      var chartDom = document.getElementById('pie');
      this.myChart2 = echarts.init(chartDom);
      //请求:
      let that = this;
      this.$axios.get('/echarts/members')
        .then(function (response) {
          that.echartOption2.series[0].data = response.data.data;
          that.echartOption2.series[1].data = response.data.data;
        }).catch(function (error) {
          console.log(error);
        })
      this.echartOption2 && this.myChart2.setOption(this.echartOption2);

      this.$axios.get('/user/userCounts')
        .then(function (response) {
          that.allUserCount = response.data.data;
        }).catch(function (error) {
          console.log(error);
        })

      this.$axios.get('/storeOrder/allCount')
        .then(function (response) {
          that.allOrderCount = response.data.data;
        }).catch(function (error) {
          console.log(error);
        })

      this.$axios.get('/storeOrder/allPay')
        .then(function (response) {
          that.allPayMoney = response.data.data;
        }).catch(function (error) {
          console.log(error);
        })

      this.$axios.get('/storeOrder/allCost')
        .then(function (response) {
          that.allCostMoney = response.data.data;
        }).catch(function (error) {
          console.log(error);
        })

      this.$axios.get('/storeOrder/allPayByEveryMonth')
        .then(function (response) {
          let array = response.data.data;
          for (let index = 0; index < array.length; index++) {
            array[index].name = array[index].month + "月";
            array[index].value = array[index].price;
            that.echartOption4.series[0].data.push(array[index].price);
            that.echartOption4.xAxis.data.push(array[index].month + "月");

            that.echartOption3.xAxis.data.push(array[index].month + "月");
            that.echartOption3.series[0].data.push(array[index].price);
            that.echartOption3.series[1].data.push(array[index].cost);
          }
          that.echartOption1.series[0].data = array;
        }).catch(function (error) {
          console.log(error);
        })

      //多折线图
      var chartDom = document.getElementById('line');
      this.myChart3 = echarts.init(chartDom);
      var option = this.echartOption3;
      option && this.myChart3.setOption(option);

      //单折线图
      var chartDom = document.getElementById('fundmentalLine');
      this.myChart4 = echarts.init(chartDom);
      var option = this.echartOption4;
      option && this.myChart4.setOption(option);
    },


  }

</script>

<style>
  .el-row-inline {
    display: flex;
    flex-wrap: wrap;
  }

  .el-card {
    min-width: 100%;
    height: 100%;
  }

</style>
